<template>
  <view class="face-register">
    <!-- 提示文字 -->
    <view class="notice">
      <text class="notice-title">上传须知</text>
      <text class="notice-item">1. 请上传清晰、无遮挡的正面人脸照片</text>
      <text class="notice-item">2. 请勿佩戴帽子、口罩或墨镜</text>
      <text class="notice-item">3. 确保光线充足，面部特征可见</text>
    </view>

    <!-- 上传区域 -->
    <view class="upload-area" @tap="chooseImage" :style="{ backgroundImage: imageUrl ? '' : 'url(/static/pic/OIP.jpg)', backgroundSize: 'cover', backgroundPosition: 'center' }">
      <image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="preview-img" />
      <view v-else class="upload-placeholder">
        <text class="iconfont icon-camera"></text>
        <text class="tip">点击上传人脸照片</text>
      </view>
    </view>

    <!-- 提交按钮 -->
    <button class="submit-btn" :disabled="!imageUrl" @tap="submitFace">提交注册</button>
  </view>
</template>

<script>
import { getUserInfo } from '@/utils/auth'

export default {
  data() {
    return {
      imageUrl: '' // 本地临时路径
    }
  },
  methods: {
    // 获取用户信息
    getUserInfo() {
      return getUserInfo()
    },
    // 选择图片
    chooseImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'], // 仅相册上传
        success: (res) => {
          this.imageUrl = res.tempFilePaths[0]
        }
      })
    },
    // 提交人脸注册
    submitFace() {
      if (!this.imageUrl) return
      
      // 获取当前用户信息
      const userInfo = this.getUserInfo()
      if (!userInfo || !userInfo.id) {
        uni.showToast({ title: '请先登录', icon: 'none' })
        return
      }
      
      // 使用配置的人脸识别服务URL
      const apiConfig = require('@/config/api.js').default
      
      uni.uploadFile({
        url: apiConfig.faceApiUrl + '/api/user/face/register/upload',
        filePath: this.imageUrl,
        name: 'image',
        formData: {
          'user_id': userInfo.id
        },
        success: (res) => {
          try {
            const data = JSON.parse(res.data)
            if (data.success) {
              uni.showToast({ title: '注册成功', icon: 'success' })
              setTimeout(() => uni.navigateBack(), 1500)
            } else {
              uni.showToast({ title: data.message || '注册失败', icon: 'none' })
            }
          } catch (e) {
            uni.showToast({ title: '响应解析失败', icon: 'none' })
          }
        },
        fail: (err) => {
          console.error('人脸注册失败:', err)
          uni.showToast({ title: '网络请求失败', icon: 'none' })
        }
      })
    }
  }
}
</script>

<style scoped>
.face-register {
  padding: 40rpx;
  text-align: center;
}
.notice {
  margin-bottom: 40rpx;
  padding: 24rpx;
  background: #fffbe6;
  border: 2rpx solid #ffe58f;
  border-radius: 12rpx;
  text-align: left;
}
.notice-title {
  display: block;
  font-size: 28rpx;
  font-weight: bold;
  color: #fa8c16;
  margin-bottom: 12rpx;
}
.notice-item {
  display: block;
  font-size: 26rpx;
  color: #666;
  line-height: 1.6;
}
.upload-area {
  width: 400rpx;
  height: 400rpx;
  margin: 0 auto 60rpx;
  border: 2rpx dashed #ccc;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fcfcfc;
}
.preview-img {
  width: 100%;
  height: 100%;
}
.upload-placeholder {
  flex-direction: column;
}
.icon-camera {
  font-size: 80rpx;
  color: #999;
}
.tip {
  margin-top: 20rpx;
  color: #666;
}
.submit-btn {
  width: 80%;
  background: #007aff;
  color: #fff;
  border-radius: 50rpx;
}
.submit-btn[disabled] {
  background: #ccc;
}
</style>
